<!-- 为解决row-key导致的多选框点击后总按钮显示问题，加入isSetRowKey判断，列表若有层级，父组件需传isSetRowKey，以及row-key -->
<template>
  <div v-loading="loading" style="height: 100%; width: 100%">
    <el-table
      :data="tableData"
      :border="true"
      :max-height="height"
      @selection-change="handleSelectionChange"
      stripe
      style="width: 100%"
      :header-cell-style="{
        background: '#F5F5F5',
        color: '#333',
      }"
    >
      <el-table-column
        v-if="selectable"
        type="selection"
        width="55"
        fixed="left"
        :resizable="false"
      >
      </el-table-column>
      <el-table-column
        v-if="orderable"
        label="序号"
        type="index"
        width="80"
        align="center"
        fixed="left"
        :resizable="false"
      >
      </el-table-column> 
      <el-table-column
        v-for="(col, index) in columnConfigs"
        :key="index"
        :prop="col.prop"
        :width="col.width"
        :minwidth="col.minwidth"
        :label="col.label"
        :fixed="col.fixed"
        align="center"
        :resizable="false"
        :show-overflow-tooltip="col.tipable ? true : false"
      >
        <template v-slot:default="scope">
          <template v-if="col.slot">
            <slot :row="{ name: col.slot, row: scope.row }"></slot>
          </template>
          <template v-else>
            <!-- {{ scope.row }} -->
            {{
              scope.row[col.prop] && scope.row[col.prop].length > 2000
                ? scope.row[col.prop].substr(0, 300) + "..."
                : scope.row[col.prop]
            }}
          </template>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        v-if="pageflag"
        class="page"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.pageNum"
        :page-sizes="pages.pageSizes"
        :page-size="pages.pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="pages.total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script setup name="HTable">
import { number } from "echarts";
import { reactive } from "vue";
// const { proxy } = getCurrentInstance();
//   const { sys_job_group, sys_job_status } = proxy.useDict(
//     "sys_job_group",
//     "sys_job_status"
//   );

// name: "HTable",
// props: {
//   tableData: {
//     type: Array,
//     default: () => {},
//   },
//   columnConfigs: {
//     type: Array,
//     default: () => [],
//   },
//   pages: {
//     type: Object,
//     default: () => {},
//   },
//   pageflag: {
//     type: Boolean,
//     default: true,
//   },
//   selectable: {
//     type: Boolean,
//     default: true,
//   },
//   orderable: {
//     type: Boolean,
//     default: false,
//   },
//   height: {
//     type: String,
//     default: null,
//   },

// },
const props = defineProps({
  tableData: {
    type: Array,
    default: () => {},
  },
  columnConfigs: {
    type: Array,
    default: () => [],
  },
  pages: {
    type: Object,
    default: () => {},
  },
  pageflag: {
    type: Boolean,
    default: true,
  },
  selectable: {
    type: Boolean,
    default: true,
  },
  orderable: {
    type: Boolean,
    default: false,
  },
  height: {
    type: String,
    default: null,
  },
});
// data() {
//   return {
//     loading: false,
//     currentPage: 1, //当前页码
//     pageSize: 10, //每页显示的条数
//     pageTotal: 10, //总条数
//   };
// },
const loading = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);
const pageTotal = ref(10);
// created() {
//   //console.log(169);
// },
// methods: {
//   handleSizeChange(val) {
//     // this.pageSize = val;
//     // // this.getlists();
//     // this.$parent.getlists()
//     this.$emit("size-change", val);
//     //代码逻辑
//   },
//   handleCurrentChange(val) {
//     // this.currentPage = val;
//     // this.$parent.getlists()
//     // console.log("当前页" + val);
//     this.$emit("page-change", val);
//     // this.getlists();
//     //代码逻辑
//   },
//   refresh() {
//     this.$emit("refresh");
//   },
//   resetForm() {
//     this.$emit("resetForm");
//   },
//   handleSelectionChange(val) {
//     this.$emit("selection-change", val);
//   },

// },
const emit = defineEmits();
function handleSizeChange(val) {
  // this.pageSize = val;
  // // this.getlists();
  // this.$parent.getlists()
  // emit('update:value', 'Hello from child!');
  emit("size-change", val);
  //代码逻辑
}
function handleCurrentChange(val) {
  // this.currentPage = val;
  // this.$parent.getlists()
  // console.log("当前页" + val);
  emit("page-change", val);
  // this.getlists();
  //代码逻辑
}
function refresh() {
  emit("refresh");
}
function resetForm() {
  emit("resetForm");
}
function handleSelectionChange(val) {
  emit("selection-change", val);
}
</script>

<style scoped lang="scss">
.commonForm {
  display: flex;
  flex-wrap: wrap;
  // border: 1px solid #e5e5e5;

  ::v-deep .el-form-item {
    width: 33.33%;

    .el-form-item__label {
      padding-right: 0;
    }

    .el-form-item__content {
      padding-right: 8px;

      .el-select {
        width: 100%;
      }
    }
  }
}

.pagination{
  position: relative;
}
::v-deep .page {
  position: absolute;
  right: 0;
  margin-top: 10px;
  padding-right: 0;
  text-align: right;
  height: 48px;

  .el-pagination__sizes {
    margin-right: 0;

    .el-input--mini {
      margin-right: 0;
    }
  }
}

.global-common-table {
  position: relative;
  /*border: 1px solid #eee;*/
  /*border-bottom: 0;*/
  /*height: calc(100% - 18px);*/
  margin-top: 0 !important;
}

::v-deep .global-common-table-header-cell {
  font-size: 14px;

  color: #909399;

  .cell {
    /*font-weight: bolder!important;*/
  }
}

::v-deep .global-common-table-cell {
  font-size: 14px;
}

.table-tooltip {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  .icon-wushuju {
    font-size: 40px;
    line-height: 40px;
  }

  .tip-content {
    line-height: 32px;
  }
}

::v-deep .el-table__body {
  // 使表格兼容safari，不错位
  width: 100%;
  table-layout: fixed !important;
}
</style>
